<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="http://localhost:8080/layui/css/layui.css">

  <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">


</head>
<script type="text/javascript" src="http://localhost:8080/layui/layui.js"></script>
<body>
<div class="nav"><h3>宠物商店后台管理系统 </h3></div>
<div class="row">
  <div class="rowleft">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
      <li id="data" class="layui-nav-item"><a href="/petback/data">产品和用户数据</a></li>
      <li id="pet" class="layui-nav-item">
        <a href="javascript:;">商品管理</a>
        <dl class="layui-nav-child">
          <dd ><a id="cat"  href="/petback/cats">管理--猫</a></dd>
          <dd ><a id="dog"  href="/petback/dogs">管理--狗</a></dd>
          <dd ><a id="fish"  href="/petback/reptiles">管理--鱼</a></dd>
          <dd ><a id="birds"  href="/petback/birds">管理--鸟</a></dd>
        </dl>
      </li>
      <li id="order" class="layui-nav-item"><a href="/petback/order">订单管理</a></li>
      <li id="user" class="layui-nav-item"><a href="/petback/user">用户信息管理</a></li>
    </ul>
  </div>
  <div style="display: flex;flex-direction: column; align-items: center">
    <div class="rowrighttop"
         style="width: 1145px; margin-top: 10px;margin-bottom: 5px; display: flex;flex-direction: row;justify-content: flex-start">
      <div class="input-group" style="margin-left: 10px">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                    </span>
      </div>
      <button style="margin-left: 40px" type="button" class="btn btn-default" data-toggle="modal"
              data-target="#exampleModal">
        添加商品
      </button>
    </div>

    <div class="rowright">
      <!--               内容是左右排列-->
    </div>
  </div>

</div>
<!--      修改框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">Change The Pet</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="display: flex;flex-direction: row;justify-content: flex-start">
        <div style="display: flex;flex-direction: column;align-items: center">
          <img id="imghead2" style="padding-bottom: 10px; height:300px;width: 250px;margin-right: 30px;"
               src="http://localhost:8080/itempic/upload.png" alt="上传图片">
          <input type="file" id="file2" name="file2" onchange="setImage2(this)">
        </div>
        <div  id="motext">
          ItemID: <input id="itemid2" type="text" class="form-control" placeholder="ItemID"
                         disabled="disabled"   aria-label="Accepter" aria-describedby="addon-wrapping">
          ListPrice: <input id="listprice2" type="text" class="form-control" placeholder=" ListPrice"
                            aria-label="ShipCountry" aria-describedby="addon-wrapping">
          Unicost: <input id="unicost2" type="text" class="form-control" placeholder="Unicost"
                          aria-label="ShipCity" aria-describedby="addon-wrapping">
          Inventory: <input id="inventory2" type="text" class="form-control" placeholder="Inventory"
                            aria-label="DetailAddress" aria-describedby="addon-wrapping">
          Attr: <input id="attr2" type="text" class="form-control" placeholder="Attr"
                       aria-label="DetailAddress" aria-describedby="addon-wrapping">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="update" data-dismiss="modal">修改</button>
        <button type="button" class="btn btn-primary" id="delete" data-dismiss="modal">下架</button>
      </div>
    </div>
  </div>
</div>
<!--  添加框-->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add The Pet</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="display: flex;flex-direction: row;justify-content: flex-start">
        <div style="display: flex;flex-direction: column;align-items: center">
          <img id="imghead" style="height:300px;width: 250px;margin-right: 30px;"
               src="http://localhost:8080/itempic/upload.png" alt="上传图片">
          <input type="file" id="file" name="file" onchange="setImage(this)">
        </div>

        <div>
          <div style="height: 60px; display: flex;flex-direction: column;align-items: center">
            <text style="color: #555; font-size: 20px;font-weight:90">Please choose category</text>
            <select style="width: 100px;height: 30px" name="category" lay-verify="" id="category">
              <option value="CATS" selected>CATS</option>
              <option value="DOGS">DOGS</option>
              <option value="BIRDS">BIRDS</option>
              <option value="REPTILES">REPTILES</option>
            </select>
          </div>
          ItemID: <input id="itemid" type="text" class="form-control" placeholder="ItemID"
                         aria-label="Accepter" aria-describedby="addon-wrapping">
          ListPrice: <input id="listprice" type="text" class="form-control" placeholder=" ListPrice"
                            aria-label="ShipCountry" aria-describedby="addon-wrapping">
          Unicost: <input id="unicost" type="text" class="form-control" placeholder="Unicost"
                          aria-label="ShipCity" aria-describedby="addon-wrapping">
          Inventory: <input id="inventory" type="text" class="form-control" placeholder="Inventory"
                            aria-label="DetailAddress" aria-describedby="addon-wrapping">
          Attr: <input id="attr" type="text" class="form-control" placeholder="Attr"
                       aria-label="DetailAddress" aria-describedby="addon-wrapping">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="submit" data-dismiss="modal">上架</button>
      </div>
    </div>
  </div>
</div>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
        crossorigin="anonymous"></script>
</body>

<script>
  function setImage(obj) {
    var file = document.getElementById("file").files[0];    //获取文件信息
    var imgdata = '';
    if (file) {
      var reader = new FileReader();  //调用FileReader
      reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
      reader.onload = function (evt) {   //读取操作完成时触发。
        $("#imghead").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
      };
      let formdata = new FormData();
      let img_file = document.getElementById("file2").files[0];
      formdata.append("file", img_file);
      formdata.append("id", $("#itemid2").val())
      $.ajax({
        url: "http://localhost:8080/petback/item/importPicture",
        type: "POST",
        async: false,
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
          if (data['code'] === '200') {
            layer.msg("修改成功");
          }
        }
      })
    } else {
      console.log("上传失败");
    }
  }

  function setImage2(obj) {
    var file = document.getElementById("file2").files[0];    //获取文件信息
    var imgdata = '';
    if (file) {
      var reader = new FileReader();  //调用FileReader
      reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
      reader.onload = function (evt) {   //读取操作完成时触发。
        $("#imghead2").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
      };
    } else {
      console.log("上传失败");
    }
  }

  $.ajax({
    url: "http://localhost:8080/petback/item/getItemByCategory/DOGS",
    type: "GET",
    contentType: "application/json",
    dataType: "text",
    success: function (data) {
      let json = JSON.parse(data);
      if (json['code'] === '200') {
        for (let i = 0; i < json['msg'].length; i++) {
          $(".rowright").append("<div class=\"rowrightone\">\n" +
                  "                <img class=\"image\"\n" +
                  "                     src=\" " + json['msg'][i].picture + "\"/>\n" +
                  "                <div class=\"textbox\">\n" +
                  "                    <text style=\"display:inline-block; padding-bottom: 10px\">" + json['msg'][i].itemid + "</text>\n" +
                  "                    <text>listprice: " + json['msg'][i].listprice + "</text>\n" +
                  "                    <text>unicost:" + json['msg'][i].unicost + "</text>\n" +
                  "                    <text>inventory:" + json['msg'][i].inventory + "</text>\n" +
                  "                       <button  style=\"margin-top: 20px; width: 100px;height: 60px\" type=\"button\" class=\"layui-btn layui-btn-radius\" data-toggle=\"modal\" data-target=\"#exampleModal2\">修改</button>\n" +
                  "                </div>\n" +
                  "            </div>")
        }
      } else {
        layer.msg('网络错误')
      }
      $(".textbox>button").click(function () {
        let s = $(this).parent().children().first().text()
        $.ajax({
          url: 'http://localhost:8080/petback/item/getItemById/'+s,
          type : 'GET',
          contentType : 'application/json',
          dataType: 'text',
          success: function (data) {
            let json=JSON.parse(data);
            if (json['code'] === '200'){
              $("#itemid2").val(json['msg'].itemid);
              $("#listprice2").val(json['msg'].listprice);
              $("#unicost2").val(json['msg'].unicost);
              $("#inventory2").val(json['msg'].inventory);
              $("#attr2").val(json['msg'].attr);
              $("#imghead2").attr("src",json["msg"].picture)
            }
            else {
              layer.msg('网络错误')
            }
          },
          error:function (e){
            console.log(e)
          }
        })
      })
    },
    error: function (e) {
      console.log("请求出错")
    }
  })

  $("#submit").click(function () {
    let formdata = new FormData();
    let img_file = document.getElementById("file").files[0];
    formdata.append("picture", img_file);
    formdata.append("id", $("#itemid").val());
    formdata.append("listprice", $("#listprice").val());
    formdata.append("unicost", $("#unicost").val());
    formdata.append("inventory", $("#inventory").val());
    formdata.append("attr", $("#attr").val());
    formdata.append("category", $("#category").val());
    $.ajax({
      url: "http://localhost:8080/petback/item/insertItem",
      type: "POST",
      async: false,
      processData: false,
      contentType: false,
      data: formdata,
      success: function (data) {
        if (data['code'] === '200') {
          layer.msg("上传成功");
        }
      }
    })
  })
  $("#update").click(function () {
    $.ajax({
      url: "http://localhost:8080/petback/item/updateInfoById",
      type: "POST",
      contentType: "application/json",
      dataType: "JSON",
      data: JSON.stringify({
        "id": $("#itemid2").val(),
        "listprice": $("#listprice2").val(),
        "unicost": $("#unicost2").val(),
        "inventory": $("#inventory2").val(),
        "attr": $("#attr2").val()
      }),
      success: function (data) {
        if (data['code'] === '200') {
          layer.msg("修改成功");
        }
      }
    })
  })
  $("#delete").click(function () {
    $.ajax({
      url: "http://localhost:8080/petback/item/changeToNo",
      type: "POST",
      contentType: "application/json",
      dataType: "JSON",
      data: JSON.stringify({
        "id": $("#itemid2").val()
      }),
      success: function (data){
        if (data['code'] === '200') {
          layer.msg("下架成功");
        }
      }
    })
  })
  //选中效果
    $("#pet").addClass("layui-nav-itemed")
    $("#dog").addClass("changecolor")
    $("#dog").addClass("focus").css("pointer-events","none");

</script>

<style>
  .nav {
    background-color: #9F9F9F;
    width: 100%;
    height: 50px;
    text-align: center;
  }

  .rowleft {
    width: 200px;
    height: 550px;
    background-color: #393d49;
  }

  .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .image {
    width: 200px;
    height: 250px;
  }

  .rowright {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 550px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
  }

  .rowrightone {
    width: 30%;
    height: 250px;
    margin: 15px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    box-shadow: 0px 0px 25px #c3c3c3;
  }

  .textbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 35px;
    width: 150px;
    height: 250px;
  }
  .changecolor{
    background-color: #009999;
  }
  .textbox > text {
    font-size: 20px;
  }
</style>

</html>
